<template>
	<view class="container">
		<view class="nav-bar">
			<tn-nav-bar class="nav-title" fixed :bottomShadow="false">返校预约</tn-nav-bar>
		</view>
		<view class="search-bar">
			<input class="search-input" type="text" placeholder="请输入搜索内容" />
			<button class="search-btn">搜索</button>
		</view>
		<view class="empty" v-if="applyList.length === 0">暂无申请记录</view>
		<view class="apply-list">
			<!-- 申请列表 -->
		</view>
		<view class="apply-btn-area">
			<button class="apply-btn" @click="goToApply">返校预约</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			applyList: [] // 申请列表数据
		};
	},
	methods: {
		goToApply() {
			// 跳转到申请退学页面
			uni.navigateTo({
				url: '/minePages/backSchoolApply'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;

	.nav-bar {
		display: flex;
		// justify-content: center;
		// align-items: center;
		width: 100%;
		height: 80rpx;
		background-color: #f5f5f5;
		margin-bottom: 20rpx;

		.nav-title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.search-bar {
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 20rpx;

		.search-input {
			flex: 1;
			height: 60rpx;
			padding: 0 15rpx;
			border: 1rpx solid #eee;
			border-radius: 8rpx;
			font-size: 26rpx;
		}

		.search-btn {
			width: 140rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-left: 15rpx;
			background-color: #007356;
			color: #fff;
			font-size: 26rpx;
			border-radius: 8rpx;
		}
	}

	.empty {
		margin-top: 50rpx;
		color: #999;
		font-size: 28rpx;
	}

	.apply-list {
		width: 100%;
		flex: 1; // 占满剩余空间
	}
	//这个返校预约弄到页面底部
	.apply-btn-area {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

		.apply-btn {
			width: calc(100% - 60rpx);
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			border-radius: 49rpx;
			margin: 40rpx 30rpx;
			border: none;
			background-color: #007356;
			&:active {
				background-color: #8ab873; // 点击态加深
			}
		}
	}
}
</style>
